{% load widget_tweaks %}
<script type="text/javascript" src="/static/jquery-form/jquery.form.js"></script>
<script type="text/javascript">
	try{$('input#projectId').val(sessvars.sessionObj['projectId']); projectId = sessvars.sessionObj['projectId']}
	catch(err){$('input#projectId').val(projectId)}
	$('input#pmp_category').val(window.location.pathname.substring(5, window.location.pathname.length - 1))
	$('#chartImageCanvas').hide()
	$('#chartImageBtn').click(function(){
		if (typeof chart_engine == 'undefined') var chart_engine = 'highcharts' //set default chart engine to highcharts
		if (chart_engine == 'highcharts'){ //highcharts type
			canvg(document.getElementById('chartImageCanvas'), chart1.getSVG())
			var canvas = document.getElementById("chartImageCanvas");
			var img = canvas.toDataURL("image/png");
			var legend = ''
		}
		/*
		//unfortunately, this does not include the axis labels, which makes it somewhat worthless
		else if (chart_engine == 'flot'){ //flot type
			var canvas = plot.getCanvas()
			var img = canvas.toDataURL("image/png");
			var legend = $('#legend').html()
		}
		//this only exports the svg geometry and not the underlying png map--would need to painfully recontruct the tiles for this to work properly
		else{ //map type
			var svg = $('div[id^="OpenLayers.Layer.Vector.RootContainer"]').html()			
			canvg(document.getElementById('chartImageCanvas'), svg)
			var canvas = document.getElementById("chartImageCanvas");
			var img = canvas.toDataURL("image/png");
		}
		*/
		$.ajax({
			type: "POST",
			url: '/pmp/utils/',
			data: JSON.stringify({'utilType': 'chart_image', 'pmp_category': window.location.pathname.substring(5, window.location.pathname.length - 1), 'chartImageForm': $('form#chartImageForm').serializeObject(), 'projectId': projectId, 'image':img, 'name':$('#id_image_name').val(), 'legend':legend}),
			success: function(data){
				$('#chartImageSave').html(data)
				$('#chartImageCanvas').hide()
			}
		});
		return false;
	});
	$('form#chartImageMapForm').ajaxForm({
		type: "POST",
		url: '/pmp/utils/',
		success: function(data){
			$('#chartImageSave').html(data)
			$('#chartImageCanvas').hide()
		}
	})
	
</script>

<canvas id="chartImageCanvas"></canvas>
{{chart_image_form.management_form}}
{% if map == 'false' %}
<form class='form-inline' id="chartImageForm">
	{{chart_image_form.name|attr:"placeholder:Short name (no spaces)"}}{{chart_image_form.name.errors}}
	{{chart_image_form.caption|attr:"placeholder:Caption"}}{{chart_image_form.caption.errors}}
	<button id="chartImageBtn" class="btn">Save image</button><span id="success"><strong>&nbsp;&nbsp;{{ saveStatus }}</strong></span>
</form>
{% endif %}
{% if map == 'true' %}
<form class='form-inline' id="chartImageMapForm" method="post" action="submit">
	<p><small><b>Note: </b>This type of chart cannot be automatically saved as an image. However, you can take a screenshot using Snipping Tool in Windows or Grab in OS X and then upload it here.</small></p>
	{% if mapSummary %}
		<input type="hidden" id="mapSummary" name="mapSummary" value="Map-summary"\>
	{% endif %}
	{% if not mapSummary %}
		<input type="hidden" id="mapSummary" name="mapSummary" value="User"\>
	{% endif %}
	<input type="hidden" id="projectId" name="projectId"\>
	<input type="hidden" id="pmp_category" name="pmp_category" \>
	{{chart_image_form.name|attr:"placeholder:Short name (no spaces)"}}{{chart_image_form.name.errors}}
	{{chart_image_form.caption|attr:"placeholder:Caption"}}{{chart_image_form.caption.errors}}
	{{chart_image_form.map_image}}{{chart_image_form.map_image.errors}}
	<p style="margin-top: 5px"><input type="submit" id="chartMapImageBtn" class="btn" value="Save image" /><span id="success"><strong>&nbsp;&nbsp;{{ saveStatus }}</strong></span></p>
</form>
{% endif %}
